<template>
  <li>
    <div class="m-item-con" @click="selectHandle">
      <label class="m-menu-title" :class="{'active':active }" :style="{'paddingLeft': leftPadding + 'px'}">
        <slot name="icon"></slot>
        <slot></slot>
      </label>
    </div>
  </li>
</template>

<style>

</style>

<script>
    import emitter from '@/mixins/emitter.js'
    export default{
        name: 'PoemMenuItem',
        mixins: [ emitter ],
        props:{
          level: {
            type: Number,
            default: 1
          },
          name: {
            type: String,
            required: true
          }
        },
        data () {
          return {
            active: false
          };
        },
        computed: {
          leftPadding () {
            return (this.level - 1) * 20;
          }
        },
        methods: {
          selectHandle () {
            this.dispatch('PoemMenu', 'item-change', this.name);
          }
        },
        mounted () {
          /**
           * 监听菜单变更事件并将菜单变更事件回传到父组件上
           */
          this.$on('item-change', function (name) {
              if (this.name === name) {
                this.active = true;
                this.dispatch('PoemSubMenu', 'sub-select');
              } else {
                this.active = false;
              }
          });
        }
    }
</script>
